<template>
  <el-menu
    unique-opened
    text-color="var(--text-common)"
    active-text-color="var(--text-special)"
    :collapse="isCollapse"
  >
    <template v-for="menu in menus">
      <!-- 多级菜单 -->
      <el-submenu
        v-if="menu.Children.length > 0"
        :key="menu.Id"
        :index="menu.Id + ''"
      >
        <template slot="title">
          <i :class="menu.MenuIcon"></i>
          <span slot="title">{{ menu.MenuName }}</span>
        </template>
        <el-menu-item-group v-if="menu.Children.length > 0">
          <el-menu-item
            v-for="child in menu.Children"
            :key="child.Id"
            :index="menu.Id + '-' + child.Id"
            @click="openTab(child)"
          >
            <template slot="title">
              <i :class="child.MenuIcon"></i>
              <span slot="title">{{ child.MenuName }}</span>
            </template></el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>

      <!-- 一级菜单 -->
      <el-menu-item
        v-else
        :key="menu.Id"
        :index="menu.Id + ''"
        @click="openTab(menu)"
      >
        <i :class="menu.MenuIcon"></i>
        <span slot="title">{{ menu.MenuName }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import menuApi from "@/api/MenuApi.js";

export default {
  data() {
    return {
      menus: [
        {
          Id: 1,
          MenuName: "首页",
          MenuUrl: "/home",
          MenuIcon: "el-icon-location",
          Children: [],
        },
      ],
    };
  },
  computed: {
    ...mapState("menu", {
      isCollapse: (state) => state.isCollapse,
    }),
  },
  methods: {
    openTab(menu) {
      this.add_tabs(menu);
    },
    ...mapMutations("tabs", ["add_tabs"]),
  },
  created() {
    menuApi.getAll().then((res) => {
      this.menus = res.data;
    });
  },
};
</script>

<style scoped>
.el-menu {
  height: 100%;
  width:200px;
  background-color: var(--nav-bg);
  /* border:none !important; */
}
.el-menu--collapse{
  width:auto;
}
</style>